<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/1/16
  Time: 13:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>K线图</title>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <link rel="icon" href="/css/images/favicon.ico">
    <link rel="stylesheet" type="text/css"  href="/js/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css"  href="/commons/common.css"/>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/layui/layui.js"></script>

</head>
<body>
<div id="main" style="width: 80%;height:90%;"></div>

<script>

    $(function () {
        var myChart = echarts.init(document.getElementById('main'));

        function getdata() {
            $.ajax({
                type: 'post',
                url: '/online/k',
                success: function (res) {
                    data2k(res)
                },
            })

        }
        function data2k(data) {
            var option = {
                xAxis: {
                    type: 'category',
                    data: data[0]
                },
                yAxis: {
                    type: 'value'
                },
                tooltip: {},
                dataZoom: [{
                    type: 'inside',
                    start: 84,
                    end: 100
                }, {
                    start: 0,
                    end: 100
                }],
                series: [{
                    data: data[1],
                    type: 'line',
                    markPoint: {
                        data: [{
                            type: "max",
                            itemStyle: {
                                color: "rgba(255, 0, 0, 1)"
                            }
                        }, {
                            type: "min",
                            itemStyle: {
                                color: "rgba(0, 255, 64, 1)"
                            }
                        }
                        ],
                    },
                    markLine: {
                        data: [{
                            type: "average"
                        }],
                        silent: true
                    }

                }]
            };

            option && myChart.setOption(option);
        }

        var time = 20;//刷新20次
        function timeflies() {
            if (time > 0) {
                time = time-1;
                setTimeout(function() {
                    getdata()
                    timeflies();
                    //300秒刷一次
                },300000);
            }
        }

        //打开加载
        getdata()
        //刷新
        //timeflies()

    })
</script>
</body>
</html>
